{{ include('doctype.twig') }}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Cabinet Manager - Gestion des cabinets</title>
	{{ include('common-meta.twig') }}
	{{ include('common-css.twig') }}
	<!-- dashboard -->
	<link rel="stylesheet" href="bootstrap/css/uniform.css" />
	<link rel="stylesheet" href="bootstrap/css/select2.css" />		
	<link rel="stylesheet" href="bootstrap/css/unicorn.main.css" />
	<link rel="stylesheet" href="bootstrap/css/unicorn.grey.css" class="skin-color" />
</head>
	<body>
		{{ include('topbar.twig') }}
		{{ include('searchbox.twig') }}
		{{ include('navbar.twig') }}
		{{ include('sidebar.twig') }}
		<!-- {{ include('style-switcher.twig') }} -->
		
		<div id="content">
			
			{{ include('includes/content-header.twig') }}
			{{ include('includes/breadcrumb.twig') }}
			
			<div class="container-fluid">

			<div class="widget-box">
				<div class="widget-title">
					<h5>Liste des cabinets</h5>

				</div>
				<div class="widget-content nopadding">
					<table class="table table-bordered data-table">
						<thead>
							<tr>
                                {% for column in columns %}
                                    <th>{{ column }}</th>
								{% endfor %}
                            <th></th>
							</tr>
						</thead>
						<tbody>
							{% for row in rows %}
								<tr>
								{% for column in columns %}
                                    {% if column == 'Patient' %}
                                        <td><a href="forms.php?table=patient&action=update&p={{ row['id'] }}">{{ row[column] }}</a></td>
                                    {% else %}
                                        <td>{{ row[column] }}</td>
                                    {% endif %}
								{% endfor %}
                                <td>
                                    <a href="forms.php?table={{ tableName }}&action=update&p={{ row['id'] }}" title="Modifier"><i class="icon-edit"></i></a>
                                <a href="?action=delete&p={{ row['id'] }}" title="Modifier"> <i class="icon-remove"></i></a>

                                </td>
								</tr>
							{% endfor %}
						</tbody>
					</table>
				</div>
			</div>
            
            
			<div class="widget-box">
				<div class="widget-title">
					<span class="icon"><i class="icon-signal"></i> </span>
					<h5>Site Statistics</h5>
					<div class="buttons">
						<a href="#" class="btn btn-mini"><i class="icon-refresh"></i>
							Update stats</a>
					</div>
				</div>
				<div class="widget-content">
					<div class="row-fluid">
						<div class="span12">
							<div class="chart"></div>
						</div>
					</div>
				</div>
			</div>


		</div>
		</div>
	    {{ include('footer.twig') }}
        <script langague="javascript" >
		$(document).ready(function(){
			// === Prepare the chart data ===/
			var consult = [], sum = [];
			{% for data in datasChart %}
		        consult.push([({{ data.time }}*1000), {{ data.count }}]);
	            sum.push([({{ data.time }}*1000), {{ data.total }}]);
			{% endfor %}
		    
			// === Make chart === //
		    var plot = $.plot($(".chart"),
		           [ 
			           { data: consult, label: "Nb consultations", color: "#BA1E20", yaxis: 1}, 
			           { data: sum, label: "Chiffre (&euro;)", color: "#459D1C", yaxis: 2 } 
		           ], 
		           {
		               series: {
		                   lines: { show: true },
		                   points: { show: true }
		               },
		               grid: { hoverable: true, clickable: true },
		               xaxis: { mode: "time", timeformat: "%m/%y", minTickSize: [1, "month"] },
		               yaxes: [ 
			                   { position: "left", min: 0, max: 100, color: "#BA1E20" }, 
				               { position: "right", min: 0, max: 15000, color: "#459D1C" } 
				              ]
		               
				   });

		
		    
			// === Point hover in chart === //
		    var previousPoint = null;
		    $(".chart").bind("plothover", function (event, pos, item) {
				
		        if (item) {
		            if (previousPoint != item.dataIndex) {
		                previousPoint = item.dataIndex;
		                
		                $('#tooltip').fadeOut(200,function(){
							$(this).remove();
						});
		                var x = item.datapoint[0].toFixed(2),
							y = item.datapoint[1].toFixed(2);
		                    
		                /*unicorn.flot_tooltip(item.pageX, item.pageY,item.series.label + " of " + x + " = " + y);*/
		                unicorn.flot_tooltip(item.pageX, item.pageY, y);
		            }
		        } else {
					$('#tooltip').fadeOut(200,function(){
							$(this).remove();
						});
		            previousPoint = null;           
		        }   
		    });	
		});


		unicorn = {
				// === Tooltip for flot charts === //
				flot_tooltip: function(x, y, contents) {
					
					$('<div id="tooltip">' + contents + '</div>').css( {
						top: y + 5,
						left: x + 5
					}).appendTo("body").fadeIn(200);
				}
		}
							
		</script>
